/**
 * Created by xiaom on 2016/11/6.
 */
import React, {Component} from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton';
import {
  Header,
  shouldUpdate,
  Wrapper,
  Cell,
  CellBd,
  CellHd,
  CellFt,
  CellsTitle
} from '../../components/index';
import {
  Step,
  Stepper,
  StepLabel,
  StepContent,
} from 'material-ui/Stepper';
import Divider from 'material-ui/Divider';
import {Link} from 'react-router';
import Snackbar from 'material-ui/Snackbar';
import {red500} from 'material-ui/styles/colors';
import Time from 'react-time-format';
import axios from 'axios';
import querystring from 'querystring';


export default class Details extends Component {


  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      details: [],
      openSnackbar: false,
      message: ''
    };
  }

  shouldComponentUpdate(nextProps = {}, nextState = {}) {
    return shouldUpdate(this, nextProps, nextState);
  }

  getDetails(id) {
    const _this = this;
    axios.post('http://localhost/netmaker/backstage/index.php?g=api&m=WeChat&a=getUserRepairDetails', querystring.stringify({
      id: id
    }))
      .then(function (response) {
        if (response.data.code == 200) {
          if (!_this.isUnmounted) {
            _this.setState({details: response.data.data});
          }
        } else {
          _this.SnackbarChange(response.data.message);
        }
      })
      .catch(function (error) {
        _this.SnackbarChange("网络错误！请稍后再试~");
        return false;
      });
  }

  SnackbarRequestClose = () => {
    this.setState({
      openSnackbar: false
    });
  };

  SnackbarChange = (message) => {
    this.setState({
      openSnackbar: true,
      message: message
    });
  };

  componentWillUnmount() {
    this.isUnmounted = true;
  }

  componentDidMount() {
    const _this = this;
    _this.getDetails(this.props.location.query.id);
  }

  activeStep(status) {
    switch (status) {
      case null:
        return 0;
      case '1':
        return 1;
      case '2':
        return 3;
    }
  }

  render() {
    const _this = this;
    const {openSnackbar, message, details} = _this.state;
    return (
      <div>
        <Header title="宽带报修详情"/>
        <Snackbar
          open={openSnackbar}
          message={<p>{message}</p>}
          autoHideDuration={4000}
          onRequestClose={_this.SnackbarRequestClose}
          bodyStyle={{backgroundColor: red500}}
        />
        <Wrapper>
          <Card>
            <CardHeader
              title={details.fault_type_title}
              subtitle={<Time value={details.creation_time * 1000} format="报修时间: YYYY-MM-DD hh:mm:ss"/>}
            />
            <CardTitle title={details.account} subtitle={details.operator_title}/>

            <Cell>
              <CellBd><p>姓名</p></CellBd>
              <CellFt>{details.name}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>手机</p></CellBd>
              <CellFt>{details.mobile}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>校区</p></CellBd>
              <CellFt>{details.campus_title}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>区域</p></CellBd>
              <CellFt>{details.building_title}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>房号</p></CellBd>
              <CellFt>{details.room_number}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>运营商</p></CellBd>
              <CellFt>{details.operator_title}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>宽带帐号</p></CellBd>
              <CellFt>{details.account}</CellFt>
            </Cell>

            <Cell>
              <CellBd><p>故障类型</p></CellBd>
              <CellFt>{details.fault_type_title}</CellFt>
            </Cell>
            <Cell>
              <CellFt>{details.description}</CellFt>
            </Cell>

            <Stepper activeStep={_this.activeStep(details.status)} orientation="vertical">
              <Step>
                <StepLabel>等待接单</StepLabel>
                <StepContent active={details.status >= 1 ? true : false}>
                  <p>
                    维护员<strong>{details.admin_name}</strong>已接单<br/>
                    <strong>联系电话：</strong>{details.admin_mobile}
                  </p>
                </StepContent>
              </Step>
              <Step>
                <StepLabel>正在处理</StepLabel>
              </Step>
              <Step>
                <StepLabel>处理完成</StepLabel>
                <StepContent active={details.status >= 2 ? true : false}>
                  <p className={details.admin_comment ? '' : 'hide'}>
                    <strong>{details.admin_name}：</strong>{details.admin_comment}
                  </p>
                </StepContent>
              </Step>
            </Stepper>
            <CardActions>
              {
                details.status==2 ?
                  <Link to={{ pathname: '/comment', query: { id: details.id } }}><RaisedButton label="评价" backgroundColor="#1AAD19" labelColor="#FFFFFF"/></Link>
                  :''
              }
            </CardActions>
          </Card>
        </Wrapper>

      </div>
    );
  }
}
